<template>
<div class="container">  
  <span class="text">{{ textd }}</span>  
  <br><br>  
  <el-radio-group v-model="radio1" class="radio-group">  
    <el-radio label="1" size="large" border class="radio">A {{ op1 }}</el-radio>
    <el-radio label="2" size="large" border class="radio">B {{ op2 }}</el-radio>  
    <el-radio label="3" size="large" border class="radio">C {{ op3 }}</el-radio>  
  </el-radio-group>  
  <br><br>  
  <el-button type="primary" @click.native="confir1" class="confirm-button">确定</el-button>  
  <el-button type="primary" @click.native="nextQuestion" class="next-button">跳过</el-button>  
</div>

</template>
  
  
  <style>
.demonstration {
  color: var(--el-text-color-secondary);
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 填充背景样式 */  
.container {  
  background-color: #f1f1f1;  
  padding: 100px;  
}  
  
/* 题目样式 */
.text {  
    
}

/* 选项样式 */
.radio-group {  
}  

/* 确定按钮样式 */  
.confirm-button {  
  background-color: blue;  
  color: white;  
}  
  
/* 跳过按钮样式 */  
.next-button {  
  background-color: red;  
  color: white;  
}
  </style>
  
  <script>
  import axios from "axios"
  import router from "@/router";
import { ref } from 'vue'
    export default {
        
      data() {
        const item = {
          textd: '',
          ans: '',
          op1:'',
          op2:'',
          op3:''
        }
        return{
            textd: '',
          ans: '',
          op1:'',
          op2:'',
          op3:'',
            radio1:''
        }
      },
      methods: {  
        Prandom() {  
            const ranmatch = {  
                id: Math.floor(Math.random() * 3)  
            }
    //   methods:{
    //       Prandom(){
    //         const ranmatch={
    //             id: Math.floor(Math.random()*3)
    //         } 

        //     axios.post('http://localhost:8090/user/findP',ranmatch).then(res=>{
        //         console.log(res.data[0].textd)
        //         this.textd=res.data[0].textd;
        //         this.ans=res.data[0].ans
        //         this.op1=res.data[0].op1
        //         this.op2=res.data[0].op2
        //         this.op3=res.data[0].op3
        //     })
        //   },
        axios.post('http://localhost:8090/user/findP', ranmatch).then(res => {  
                if (res.data && res.data.length > 0) {  
                    console.log(res.data[0].textd)  
                    this.textd = res.data[0].textd || ''; // 设置默认值  
                    this.ans = res.data[0].ans || '';  
                    this.op1 = res.data[0].op1 || '';  
                    this.op2 = res.data[0].op2 || '';  
                    this.op3 = res.data[0].op3 || '';  
                } else {  
                    console.log('服务器响应数据为空或长度小于1');  
                }  
            })  
        },  

        sleep(ms) { //sleep延迟方法
            var unixtime_ms = new Date().getTime();
            while(new Date().getTime() < unixtime_ms + ms) {}
        },
          confir1(){
            if(this.radio1==this.ans){
                alert("恭喜你，答对了！")
                this.Prandom()


            }else{
                alert("答错了，再想想")
            }
          },
          nextQuestion() {  
            this.Prandom()
          } 
      },
      beforeMount(){
          this.Prandom()
      },
       
      
    };
  </script>